<template>
  <footer>
    <ul>
      <li
        :class="activeHeaderMenu[0] === 'home' ? 'active' : ''"
        @click="$commonJs.goPage('home')"
      >
        <span class="iconfont iconshouye"></span><br />
        <span>首页</span>
      </li>
      <li
        :class="activeHeaderMenu[0] === 'project' ? 'active' : ''"
        @click="$commonJs.goPage('project')"
      >
        <span class="iconfont iconxiangmu"></span><br />
        <span>项目</span>
      </li>
      <li
        :class="activeHeaderMenu[0] === 'new' ? 'active' : ''"
        @click="$commonJs.goPage('new')"
      >
        <span class="iconfont iconxinwen"></span><br />
        <span>新闻</span>
      </li>
      <li
        :class="activeHeaderMenu[0] === 'person' ? 'active' : ''"
        @click="$commonJs.goPage('person')"
      >
        <span class="iconfont iconwode"></span><br />
        <span>我的</span>
      </li>
    </ul>
  </footer>
</template>

<script>
import "@/assets/fonticon/iconfont.css";
export default {
  name: "mobileIndex",
  computed: {
    activeHeaderMenu() {
      return this.$store.state.activeHeaderMenu;
    }
  }
};
</script>

<style scoped lang="less">
footer {
  padding: 11px 0;
  width: 100%;
  border-top: 1px solid #e1e1e1;
  height: 95px;
  ul {
    .flex_content();
    font-size: 0;
    li {
      .flex_one();
      text-align: center;
      color: #333333;
      font-size: 24px;
      .iconfont {
        font-size: 30px;
        margin-top: 0;
      }
      span {
        display: inline-block;
        margin-top: 10px;
      }
    }
    .active {
      color: @primary-color;
    }
  }
}
</style>
